 * {
   margin: 0;
   padding: 0;
 }

 html {
   height: 100%;
 }

 body {
   height: 100%;
 }

 .container {
   height: 100%;
 }

 .login-wrapper {
   background-color: rgb(255, 255, 255, 0.7);
   width: 358px;
   height: 398px;
   border-radius: 15px;
   padding: 0 50px;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 .header {
   font-size: 38px;
   font-weight: bold;
   text-align: center;
   line-height: 100px;
 }

 .input-item {
   background-color: rgb(255, 255, 255, 0);
   display: block;
   width: 100%;
   margin-bottom: 20px;
   border: 0;
   padding: 10px;
   border-bottom: 1px solid rgb(128, 125, 125);
   font-size: 15px;
   outline: none;
 }

 .input-item:placeholder {
   text-transform: uppercase;
 }

 .btn {
   text-align: center;
   padding: 10px;
   width: 100%;
   margin-top: 40px;
   background-image: linear-gradient(to right, #80c4ff, #84abff);
   color: #fff;
 }

 .msg {
   text-align: center;
   line-height: 88px;
 }

 a {
   text-decoration-line: none;
   color: #abc1ee;
 }

 .bg-video {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 8;
   min-width: 100%;
   min-height: 100%;
   height: auto;
   width: auto;
   z-index: -1;
 }

 .span {
   display: none;
   color: red;
   margin-left: 130px;
 }

 .nihao {
   width: 100px;
   height: 30px;
   background-color: #d5e2ff;
   position: absolute;
   top: 220px;
   left: 330px;
 }

 .nihao span {
   text-align: center;
   margin-left: 30px;
   line-height: 30px;
   font-weight: 550;
   color: #484848;
 }

 .yzm1 {
   width: 100px;
   height: 30px;
   background-color: rgba(255, 255, 255, 0.2);
   border: none;
   position: absolute;
   top: 220px;
   left: 220px;
 }